<template>
  <t-tooltip :content="cpTooltipMsg" :trigger="cpTooltipTrigger">
    <t-button v-bind="$attrs" @click="click" :theme="cpTheme" :size="size" :block="block" :variant="variant" :shape="shape">
      <slot ></slot>
      <slot name="iconLeft">
      </slot>
      {{title}}
      <slot name="iconRight" >
      </slot>
    </t-button>
  </t-tooltip>
</template>

<script>
import customImage from '@/components/custom/form/customImage.vue'

export default {
  desc: '自定义按钮',
  components: { customImage },
  name: 'customButton',
  props: {
    /**
     * @Description：按钮标题
     * @Date 2023-10-10
     */
    title: {
      type: String,
      default: () => '按钮标题'
    },

    /**
     * @Description：按钮正常状态的提示信息
     * @Date 2023-10-10
     */
    help: {
      type: String,
      default: () => ''
    },

    /**
     * @Description：按钮禁用后的提示信息
     * @Date 2023-10-10
     */
    helpDisabled: {
      type: String,
      default: () => '当前按钮不可操作'
    },

    /**
     * @Description：按钮主题  default primary danger warning success
     * @Date 2023-10-10
     */
    theme: {
      type: String,
      default: () => 'default'
    },

    /**
     * @Description：尺寸  small medium large
     * @Date 2023-10-10
     */
    size: {
      type: String,
      default: () => 'medium'
    },

    /**
     * @Description：按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text
     * @Date 2023-10-10
     */
    variant: {
      type: String,
      default: () => 'base'
    },

    /**
     * @Description：是否块按钮
     * @Date 2023-10-10
     */
    block: {
      type: Boolean,
      default: () => false
    },

    /**
     * @Description：按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle
     * @Date 2023-10-10
     */
    shape: {
      type: String,
      default: () => 'rectangle'
    },

    /**
     * @Description：是否为幽灵按钮（镂空按钮）
     * @Date 2023-10-10
     */
    ghost: {
      type: Boolean,
      default: () => false
    },
  },
  created() {
  },
  data() {
    return {
    }
  },
  methods: {
    click(e) {
      try {
        //不让事件向documen上蔓延
        e.stopPropagation()
        // eslint-disable-next-line no-empty
      } catch (e) {
      }
      setTimeout(() => {
        this.$emit('click')
      }, 500)
    }
  },
  watch: {
  },
  computed: {
    // 提示信息
    cpTooltipMsg() {
      if (this.$attrs && this.$attrs.disabled && this.$attrs.disabled == true) {
        return this.helpDisabled
      }
      return this.help
    },
    cpTooltipTrigger() {
      return this.strings.isBlank(this.cpTooltipMsg) ? '' : 'hover'
    },
    cpTheme() {
      if (global.constCommon.themeList.findIndex(item => item.value == this.theme) == -1) {
        return global.constCommon.themeList[0].value
      }
      return  this.theme
    }
  }
}
</script>

<style lang="scss">
</style>
